<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../flexible/flexible.debug.js"></script>
    <script src="../flexible/flexible_css.debug.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/commodity.css">
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>

<body>
    <header class="header">
        <div class="left"><b class="fanhui"> < </b></div>
        <span class="center">商品信息</span>
        <span class="right">
            <img src="../img/1.png" alt="" class="imgs">
        </span>
    </header>
    <div class="section">
        <dl class="item">
            <dt><img src="../img/2.png"></dt>
            <dd>玫瑰</dd>
        </dl>
        <dl class="item orange">
            <dt><img src="../img/3.png"></dt>
            <dd>百合</dd>
        </dl>
        <dl class="item">
            <dt><img src="../img/4.png"></dt>
            <dd>菊花</dd>
        </dl>
        <dl class="item">
            <dt><img src="../img/5.png"></dt>
            <dd>康乃馨</dd>
        </dl>
        <dl class="item">
            <dt><img src="../img/6.png"></dt>
            <dd>配花</dd>
        </dl>
        <dl class="item">
            <dt><img src="../img/7.png"></dt>
            <dd>配页</dd>
        </dl>
        <dl class="item">
            <dt><img src="../img/2.png"></dt>
            <dd>其它</dd>
        </dl>
    </div>
    <div class="color">
        <p>颜色</p>
        <ul class="list">
            <li>各色</li>
            <li>黄色</li>
            <li>白色</li>
            <li>攻红色</li>
            <li>紫红色</li>
            <li>粉色</li>
        </ul>
    </div>
    <div class="pin">
        <p>品种</p>
        <div class="left add">永生花<span>(国产七彩)</span></div>
        <div class="right add">永生鲜花</div>
    </div>
    <div class="hua">
        <p>花头数</p>
        <ul class="list">
            <li>一头</li>
            <li>二头</li>
            <li>三头</li>
            <li>四头</li>
            <li>多头</li>
            <li>随机</li>
        </ul>
    </div>
    <div class="deng">
        <p>等级<span>等级说明</span></p>
        <div class="left iet"><b>A级</b></div>
        <div class="right iet"><b>B级</b></div>
    </div>
    <div class="tu">
        <p>图文详情</p>
    </div>
    <div class="img">
        <div class="left"><img src="../img/9.png" alt=""></div>
        <div><img src="../img/10.png" alt=""></div>
        <div class="right"><img src="../img/11.png" alt=""></div>
    </div>
    <div class="jian">
        <p>别称：玫瑰卡罗拉</p>
        <p>产地：云南</p>
        <p>单位：扎</p>
        <p>重量：180g</p>
        <p>描述：花径：4mm，花头：1个</p>
    </div>
    <div class="ren">
        <p>258人为该商品性价点赞<span class="span">></span></p>
        <p id="btn">相关推荐<span><img src="../icon/3.png"></span></p>
    </div>
    <div class="tujian">
        <section>
            <div>玫瑰白粉边双粉色A级</div>
            <div>￥18.50</div>
            <div class="jian">-</div>
            <div class="shi">10</div>
            <div class="last">+</div>
        </section>
        <section>
            <div>玫瑰白粉边双粉色A级</div>
            <div>￥18.50</div>
            <div class="last lasts">+</div>
        </section>
        <section>
            <div>玫瑰白粉边双粉色A级</div>
            <div>￥18.50</div>
            <div class="last lasts">+</div>
        </section>
        <section>
            <div>玫瑰白粉边双粉色A级</div>
            <div>￥18.50</div>
            <div class="last lasts">+</div>
        </section>
        <section>
            <div>玫瑰白粉边双粉色A级</div>
            <div>￥18.50</div>
            <div class="last lasts">+</div>
        </section>
    </div>
    <div class="yi">
        <p>
            宜花价：
            <span>￥20.50</span>
            <span>市场：￥30.00</span>
            <span class="gai">改</span>
            <span>历史报价</span>
        </p>
    </div>
    <footer class="footer">
        <div>
            <dl class="item">
                <dt><img src="../img/12.png"></dt>
                <dd>客服</dd>
            </dl>
        </div>
        <div>
            <dl class="item gou">
                <dt><img src="../img/13.png"></dt>
                <dd>查看</dd>
            </dl>
        </div>
        <div class="jian">-</div>
        <div class="shi">10</div>
        <div class="jia">+</div>
    </footer>

    <div class="meng">
        <div class="box">
            <p class="p"><span class="span1">装业价格改正</span><span class="cha"><img src="../icon/4.png"></span></p>
            <p class="p1">玫瑰卡罗拉A级</p>
            <p class="p1">宜花价：￥24.00&nbsp;市场价：￥36.00</p>
            <p class="p2">参与价格改正会获得5积分，如果改正的市场价接近市场真实价格，您将会获得50积分</p>
            <input type="text" value="请输入您得到的市场价">
            <input type="button" value="提交">
        </div>
    </div>

    <div class="chakan">
        <div class="box">
            <p class="p1">已添加到购物车的商品 <span class="quxiao"><img src="../icon/4.png"></span></p>
            <p>玫瑰双粉边A级<span class="span">￥18.50<span>×5</span></span>
            </p>
            <p>玫瑰卡罗拉双粉边A级<span class="span">￥18.50<span>×5</span></span>
            </p>
            <p>玫瑰蜜桃雪山双粉边A级<span class="span">￥18.50<span>×5</span></span>
            </p>
            <p>玫瑰双粉边A级<span class="span">￥18.50<span>×5</span></span>
            </p>
            <p>玫瑰卡罗拉双粉边A级<span class="span">￥18.50<span>×5</span></span>
            </p>
            <p>玫瑰蜜桃雪山双粉边A级<span class="span">￥18.50<span>×5</span></span>
            </p>
            <div class="footer">
                <div>
                    <span>总计：￥</span>
                    <span>2980.00</span>
                    <span>去购物车</span>
                </div>
            </div>
        </div>
    </div>


    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script>
        $("#btn").click(function () {
            $(".tujian").slideToggle();
        })
        $(".gai").click(function () {
            $(".meng").slideToggle();
        })
        $(".cha").click(function () {
            $(".meng").hide();
        })
        $(".gou").click(function () {
            $(".chakan").show();
        })
        $(".quxiao").click(function () {
            $(".chakan").hide();
        })
        $(".fanhui").click(function () {
            location.href = "../html/shouye.html"
        })
        $(function () {
            var li = $('.list li');
            li.hover(function () {
                $(this).css("background", "orange");
                $(this).css("color", "#fff");
            }, function () {
                $(this).css("background", "#f1f1f1");
                $(this).css("color", "#666");
            });
        })
        
    </script>
</body>

</html>